<template>
    <div :class="{
        'Like-container': true,
        'clickAnimation': showAnimation
    }"
        @click="onClick"
        @animationend="showAnimation = false">
        <i class="iconfont icon-dianzan"
            :style="{
                fontSize: size + 'px'
            }"></i>
    </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'


defineOptions({
    inheritAttrs: true,
    name: 'Like'
})
const props = withDefaults(
    defineProps<{
        modelValue: boolean
        defaultColor?: string
        activeColor?: string
        size?: number
    }>(),
    {
        activeColor: '#f00',
        defaultColor: '#ccc',
        size: 18
    }
)
const emit = defineEmits<{
    (e: 'update:modelValue', data: boolean): void
}>()


const showAnimation = ref(false)
const curColor = computed(() => {
    return props.modelValue
        ? props.activeColor
        : props.defaultColor
})


function onClick() {
    showAnimation.value = true
    emit('update:modelValue', !props.modelValue)
}

</script>

<style lang="scss" scoped>
@import './index.scss';

.Like-container {
    i {
        color: v-bind(curColor);
    }

    @include like(v-bind(activeColor), v-bind(defaultColor));
}

.clickAnimation {
    animation: clickAnimation 1s .05s;
}

@keyframes clickAnimation {
    50% {
        transform: scale(1.7) translateY(-30%);
    }
}
</style>
